<template>
  <div class="test-sass">
    <div class="header">header</div>
    <div class="main">main</div>
    <div class="footer">footer</div>
  </div>
  <div class="test-sass-2">
    test-sass-2
  </div>
</template>

<script setup lang="ts">

</script>

<style scoped lang="scss">
// 导入scss文件中声明的变量
@import './style';
// 声明在当前style作用域下的变量，相对于当前style则是全局变量
$bg: pink;
.test-sass {
  // 声明在test-sass块下的变量，不能在当前块外使用
  $h: 200px;
  .header {
    background-color: $bg;
    height: $h;
  }
}
.test-sass-2 {
  // 使用文件导入的变量
  background-color: $out-bg;
}

$bg-color: yellow;
.test-sass-2 {
  background-color: $bg_color;
}

// 设置$size默认值，如果导入的scss文件中存在该变量，则会使用导入文件的变量值，否则使用默认值
$size: 20px !default;
.test-sass-2 {
  font-size: $size;
  @include radius
}
</style>